import QtQuick 2.0

Rectangle {
    id: rootchart
    width: 700
    height: 300

    property var settings
    property int gridSize: 4
    property real gridStep: gridSize ? (width - canvas.tickMargin) / gridSize : canvas.xGridStep
    property int index: 0
    property int flag:0
    property var points: []
    property var ctx;


    Canvas {
        id: canvas

        // Uncomment below lines to use OpenGL hardware accelerated rendering.
        // See Canvas documentation for available options.
        // renderTarget: Canvas.FramebufferObject
        // renderStrategy: Canvas.Threaded

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        property real xGridStep: 5
        property real xGridSize: width / xGridStep
        property real yGridStep: 10
        property real yGridSize: height / yGridStep


        property var ctx: context


        function drawBackground(ctx) {
            ctx.save();
            ctx.fillStyle = "#ffffff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = "#d7d7d7";
            ctx.beginPath();

            // Horizontal grid lines
            for (var i = 0; i <= yGridStep; i++) {
                ctx.moveTo(0, i * canvas.yGridSize);
                ctx.lineTo(width, i * canvas.yGridSize);
            }

            // Vertical grid lines
            for (var i = 0; i <= xGridStep; i++) {
                ctx.moveTo(i * xGridSize, 0);
                ctx.lineTo(i * xGridSize, height);
            }
            ctx.stroke();

            // Right ticks
            /*ctx.strokeStyle = "#666666";
            ctx.beginPath();
            var xStart = canvas.width - tickMargin;
            ctx.moveTo(xStart, 0);
            ctx.lineTo(xStart, canvas.height);
            for (i = 0; i < 12; i++) {
                ctx.moveTo(xStart, canvas.yGridOffset + i * canvas.yGridStep);
                ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
            }
            ctx.moveTo(0, canvas.yGridOffset + 9 * canvas.yGridStep);
            ctx.lineTo(canvas.width, canvas.yGridOffset + 9 * canvas.yGridStep);*/
            ctx.closePath();
            ctx.stroke();

            ctx.restore();
        }

        function drawNewPoint(ctx)
        {
            //console.log("draw", point)
            ctx.save();
            ctx.globalAlpha = 0.7;
            ctx.strokeStyle = "#15A0F5";
            ctx.lineWidth = 3;
            ctx.beginPath();

            for ( var i = 0; i < 200; i++) {
                var x = i * parent.width/200
                if (i == 0) {
                    ctx.moveTo(x, rootchart.points[i]);
                }
                else if (rootchart.index == i) {
                    ctx.moveTo(x, rootchart.points[i]);
                }
                else {
                    ctx.lineTo(x, rootchart.points[i]);
                }
                //console.log(rootchart.points[i]);

            }
            ctx.stroke();
            ctx.restore();
        }

        onPaint: {
            //console.log("update")
            ctx = canvas.getContext("2d");

            ctx.globalCompositeOperation = "source-over";
            ctx.lineWidth = 1;

            drawBackground(ctx);
            canvas.drawNewPoint(ctx)

        }
    }

    function add_point(point) {

        points[index] = (point+500)/10 + point%10;
        index++;
        //console.log("++++++++", points[index]);
        if (index == 200) {
            index = 0;
        }

        canvas.requestPaint()
        //canvas.update()
    }
}

